<!-- @format -->
<template>
  <div>
    <!-- v-model本身的用法 -->

    <p>{{ username }}</p>
    <input
      type="text"
      v-model="username" />

    <hr />

    <!-- 通过 v-bind + v-on 实现 v-model -->

    <p>{{ username }}</p>

    <!-- <input
      type="text"
      :value="username"
      @input="onInput" /> -->

    <!-- 直接写箭头函数，可以简化代码 -->
    <input
      type="text"
      :value="username"
      @input="(e) => (username = e.target.value)" />
  </div>
</template>

<script>
  // v-model： 双向数据绑定指令  ==>  数据  <-> 视图
  // 本质(原理)：v-model只是个语法糖，本质是 v-bind(:value属性) + v-on(@input事件) 组合
  export default {
    data() {
      return {
        username: ''
      }
    },
    methods: {
      onInput(e) {
        // 每次输入的时候都会触发input事件，执行这个函数
        // 通过 事件对象.target 获取事件真正触发的DOM元素，
        // 在这里就是 input 元素

        // 需拿到输入框的值，再重新赋值给username数据即可
        this.username = e.target.value
      }
    }
  }
</script>

<style></style>
